import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
import { useForm } from '@/components/Form/useForm';
import { Form, FormItem } from '@/components/Form/Form';

const meta = {
  root: true,
  children: [
    {
      name: 'name',
      type: 'TEXT',
      label: '姓名',
      required: true
    },
    {
      name: 'age',
      type: 'TEXT',
      label: '年龄',
    },
    {
      name: 'addr',
      type: 'SELECT',
      label: '地址',
      options: [
        {
          label: '四川省',
          value: 1,
        },
        {
          label: '重庆市',
          value: 2
        }
      ]
    },
    {
      name: 'note',
      type: 'TEXTAREA',
      label: '备注',
    },


    {
      name: 'person',
      type: 'VIRTUAL',
      children: [
        {
          name: 'province',
          type: 'TEXT',
          label: '省份'
        }
      ]
    }
  ]
}

const CreateActivity = () => {
  const form = useForm({ meta })

  function handleSubmit() {
    const res = form.validateFields();
    console.log(res, 'res')
  }

  return (
    <Form form={form}>
      {
        meta.children.map((it, index: number) => {
          const { required = false } = it;
          return <FormItem key={index} name={it.name} label={it.label} required={required} />
        })
      }
      <Button onClick={handleSubmit} type="primary">提交</Button>
    </Form>
  );
};

export default CreateActivity;
